<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <a-tabs
        v-model:activeKey="activeKey"
        animated
        @change="change"
        class="user"
      >
        <a-tab-pane key="1">
          <template #tab>
            <span>
              <!-- <SvgIcon name="user" color="#4CC87E" width="14px" height="14px"/> -->
              <UserOutlined />
              用户反馈
            </span>
          </template>
          <!-- Tab 1 -->
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <template #title>
              <header class="titleHeader">
                <div class="titleLeft">
                  反馈列表
                  <ExclamationCircleOutlined />
                </div>
              </header>
              <!-- <a-row :gutter="16" class="tables"> -->
              <CommonTable
                ref="commonTable"
                :is-select="true"
                :columns="column"
                :isLoading="isLoading"
                :data-source="dataSource"
                :total="dataSource.length"
                @getPageParams="getPageParams"
                @get-table-sort="getTableSort"
                @getSelectColumn="getSelectColumn"
              >
                <!-- <template #bodyCell="{ column }">
                      <template v-if="column.key=='name'">
                        <span>
                          <MailOutlined />
                          3333
                        </span>
                      </template>
                    </template> -->
                <!-- //这里是插槽，用于对表格进行操作，比如数据渲染和操作列的增删改查 -->
                <template v-slot:bodyCell="{ scope }">
                  <span v-if="scope.column.key != 'action'">{{
                    (scope.column.key, scope.value)
                  }}</span>
                  <!-- //这里的action是操作列，判断是否为操作列对其进行修改 -->
                  <span v-else-if="scope.column.key === 'action'">
                    <i
                      class="details"
                      type="primary"
                      @click="onView(scope.record)"
                      >回复</i
                    >
                    <!-- <a-divider type="vertical" /> -->
                    <!-- <a-button @click="onDelete(scope.record.key)">删除</a-button> -->
                  </span>
                  <span v-else-if="scope.record.key === 'tags'">
                    <MailOutlined />
                    {{ scope.record }}
                  </span>
                </template>

                <!-- <template #bodyCell="{ column, text, record }">
                      <template v-if="column.dataIndex === 'name'">
                        <div class="editable-cell">
                          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                            <a-input class="editable-cell-input" v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
                            <CheckOutlined class="editable-cell-icon-check" @click="save(record.key)" />
                          </div>
                          <div v-else class="editable-cell-text-wrapper">
                            {{ text || ' ' }}
                            <EditOutlined class="editable-cell-icon" @click="edit(record.key)" />
                          </div>
                        </div>
                      </template>
                      <template v-else-if="column.dataIndex === 'operation'">
                        <a-popconfirm
                          v-if="dataSource.length"
                          title="Sure to delete?"
                          @confirm="onDelete(record.key)"
                        >
                          <a>Delete</a>
                        </a-popconfirm>
                        <a @click="onView(record)">查看详情</a>
                      </template>
                    </template> -->
              </CommonTable>
              <!-- </a-row> -->
            </template>
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span>
              <!-- <SvgIcon name="my" color="#4CC87E" width="14px" height="14px"/> -->
              <MailOutlined />
              我的反馈
            </span>
          </template>
          <!-- Tab 2 -->
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <template #title>
              <header class="titleHeader">
                <div class="titleLeft">
                  反馈列表
                  <ExclamationCircleOutlined />
                </div>
              </header>
              <!-- <a-row :gutter="16" class="marginTop12"> -->
              <CommonTable
                ref="commonTable"
                :is-select="true"
                :columns="column2"
                :isLoading="isLoading"
                :data-source="dataSource"
                :total="dataSource.length"
              >
                <template v-slot:bodyCell="{ scope }">
                  <span v-if="scope.column.key != 'action'">{{
                    (scope.column.key, scope.value)
                  }}</span>
                  <span v-else-if="scope.column.key === 'action'">
                    <i
                      class="details"
                      type="primary"
                      @click="onView(scope.record)"
                      >查看详情</i
                    >
                  </span>
                  <span v-else-if="scope.record.key === 'tags'">
                    <MailOutlined />
                    {{ scope.record }}
                  </span>
                </template>
              </CommonTable>
              <!-- <CommonTable
                      ref="commonTable"
                      :is-select="true"
                      :columns="column2"
                      :isLoading="isLoading"
                      :data-source="dataSource"
                      :total="dataSource.length"
                      @getPageParams="getPageParams"
                      @get-table-sort="getTableSort"
                      @getSelectColumn="getSelectColumn"
                    >
                      <template v-slot:bodyCell="{ scope }">
                        <span v-if="scope.column2.key!='action'">{{ (scope.column2.key, scope.value) }}</span>
                        <span v-else-if="scope.column2.key==='action'">
                          <i class="details" type="primary" @click="onView(scope.record)">查看详情</i>
                        </span>
                          <span v-else-if="scope.record.key==='tags'">
                            <MailOutlined />
                            {{scope.record}}
                          </span>
                      </template>
                    </CommonTable> -->
              <!-- </a-row> -->
            </template>
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import {
  ExclamationCircleOutlined,
  UserOutlined,
  MailOutlined,
  CheckOutlined,
  EditOutlined,
} from "@ant-design/icons-vue";
import { ref, computed, reactive } from "vue";
import CommonTable from "../../components/myTable/index.vue";
import SvgIcon from "@/components/svgIcon.vue";
import { cloneDeep } from "lodash-es";
const activeKey = ref("2");
const change = () => {
  if (activeKey.value == "2") {
    columns = ref(column2);
  } else {
    columns = ref(column);
  }
};
// const column = ref([
//   {
//     title: 'name',
//     dataIndex: 'name',
//     key: 'name',
//     resizable: true,
//     width: 150,
//   },
//   {
//     title: 'Age',
//     dataIndex: 'age',
//     key: 'age',
//     resizable: true,
//     width: 100,
//     minWidth: 100,
//     maxWidth: 200,
//   },
//   {
//     title: 'Address',
//     dataIndex: 'address',
//     key: 'address',
//   },
//   {
//     title: 'Tags',
//     key: 'tags',
//     dataIndex: 'tags',
//   },
//   {
//     title: 'action',
//     key: 'action',
//     dataIndex: 'action',
//   },
//   {
//     title: 'renderArr',
//     key: 'renderArr',
//     dataIndex: 'renderArr',
//   },
// ]);

const column = [
  {
    title: "用户ID",
    width: 60,
    dataIndex: "name",
    key: "name",
  },
  {
    title: "游戏名称",
    width: 100,
    dataIndex: "age",
    key: "age",
  },
  {
    title: "反馈时间",
    dataIndex: "address",
    key: "tags",
    width: 100,
  },
  {
    title: "反馈类型",
    dataIndex: "address",
    key: "2",
    width: 100,
  },
  {
    title: "问题描述",
    dataIndex: "address",
    key: "3",
    width: 100,
  },
  {
    title: "反馈信息",
    dataIndex: "address",
    key: "4",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "action",
    width: 100,
  },
].map((item) => ({
  ...item,
  align: "center", // 居中
  resizable: true, // 可否伸缩
  maxWidth: 200, // 可伸缩最大宽度
  minWidth: 75, // 可伸缩最小宽度
  sorter: false, // 可否排序
}));
const column2 = [
  {
    title: "1用户ID",
    width: 60,
    dataIndex: "name",
    key: "name",
  },
  {
    title: "1游戏名称",
    width: 100,
    dataIndex: "age",
    key: "age",
  },
  {
    title: "1反馈时间",
    dataIndex: "address",
    key: "tags",
    width: 100,
  },
  {
    title: "1反馈类型",
    dataIndex: "address",
    key: "2",
    width: 100,
  },
  {
    title: "1问题描述",
    dataIndex: "address",
    key: "3",
    width: 100,
  },
  {
    title: "1反馈信息",
    dataIndex: "address",
    key: "4",
    width: 100,
  },
  {
    title: "1操作",
    dataIndex: "operation",
    key: "action",
    width: 100,
  },
].map((item) => ({
  ...item,
  align: "center", // 居中
  resizable: true, // 可否伸缩
  maxWidth: 200, // 可伸缩最大宽度
  minWidth: 75, // 可伸缩最小宽度
  sorter: false, // 可否排序
}));

// const data = ref([
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
//   {
//     key: 'action',
//     name: 'action',
//     age: 32,
//     address: 'action',
//     renderArr: ['cool', 'teacher'],
//   },
//   {
//     key: 'renderArr',
//     name: 'renderArr',
//     age: 32,
//     address: 'renderArr',
//     renderArr: ['cool', 'teacher'],
//   },
// ])
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ["cool", "teacher"],
  });
}
// 注意这里的columns必须是响应式数据,不然无法伸缩列
let columns = ref(column);
const dataSource = ref(data);
const isLoading = ref(false);
const commonTable = ref(null);

// 清空选择
const clearChecked = () => {
  commonTable.value.clear();
};
// 回到第一页(查询使用)
const searchDatas = () => {
  commonTable.value.backFirstPage();
};
// 获取分页数据
const getPageParams = (start, length) => {
  console.log("分页数据：", start, length);
};
// 获取所选项的数据
const getSelectColumn = (rows) => {
  console.log("选择的数据：", rows);
};
// 获取排序数据
const getTableSort = (sorter) => {
  if (sorter.order) {
    sorter.order == "ascend" ? console.log("升序") : console.log("降序");
    console.log("排序表头字段：", sorter.field);
  } else {
    console.log("默认顺序----");
  }
  console.log("排序数据：", sorter);
};

// const edit =(column,data)=>{
//   console.log(column,'column');
//   console.log(data,'data');
// }

const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});
const edit = (key) => {
  editableData[key] = cloneDeep(
    dataSource.value.filter((item) => key === item.key)[0]
  );
};
const save = (key) => {
  Object.assign(
    dataSource.value.filter((item) => key === item.key)[0],
    editableData[key]
  );
  delete editableData[key];
};
const onDelete = (key) => {
  dataSource.value = dataSource.value.filter((item) => item.key !== key);
};
const onView = (item) => {
  console.log(item, "ivew-item");
};
const handleAdd = () => {
  const newData = {
    key: `${count.value}`,
    name: `Edward King ${count.value}`,
    age: 32,
    address: `London, Park Lane no. ${count.value}`,
  };
  dataSource.value.push(newData);
};
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
<style lang="less">
.user {
  color: #6e6e6e;
  .ant-tabs-ink-bar {
    background-color: #29834a;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: #4cc87e;
  }
}
</style>
